﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Morris chart -->
    <link href="/resource/css/morris/morris.css" rel="stylesheet" type="text/css" />
    <!-- jvectormap -->
    <link href="/resource/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">栏目管理</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
	            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
	            <li><a href="#">Dashboard</a></li>
	            <li class="active">Current page</li>
	        </ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
				<div class="panel-body">
	                 <!-- <span class="pull-right badge badge-info">32</span> -->
	                 <button class="btn btn-primary btn-addon btn-sm" onclick="toAddCategory();">
	                     <i class="fa fa-plus"></i>添加顶级栏目
	                 </button>
	                 <button class="btn btn-primary btn-addon btn-sm" onclick="updateSort();">更新排序</button>
	            </div>
			    <div class="panel-body table-responsive">
					<table class="table table-hover">
						<thead>
							<tr>
								<th style="width:50px;">选择</th>
								<th style="width:40px;">#</th>
								<th style="width:35px;">编码</th>
								<th>栏目名称</th>
								<th>英文名称</th>
								<th style="width:80px;">显示/隐藏</th>
								<th style="width:80px;">排序</th>
								<th style="width:300px;">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr th:id="${category.id}" th:attr="parent=${category.parentId}" th:each="category : ${categorys.list}">
								<td><input type="checkbox" class="flat-grey list-child" th:value="${category.id}" /></td>
								<td>
									<img src="/resource/img/explode.gif" style="cursor:pointer;" th:attr="level=${category.level}" th:onclick="'javascript: loadSons(\''+${category.id}+'\',this)'" width="11" height="11" />
								</td>
								<td th:text="${category.code}"></td>
								<td><a th:href="@{/admin/archives/list(entity[cid]=${category.code})}" th:text="${category.cnname}"></a></td>
								<td th:text="${category.enname}">Mark</td>
								<td><span th:text="${category.isShow}=='1'?'是':'否'" th:class="${category.isShow}=='1'?'label label-success':'label label-danger'">否</span></td>
								<td>
									<input name="orderBy" type="text" th:attr="cid=${category.id}" class="form-control input-sm" th:value="${category.sort}" style="width:50px;height:20px;">
								</td>
								<td>
									<a th:href="@{/admin/category/toAdd(id=${category.id})}" class="btn btn-xs btn-success">添加下级栏目</a>
									<span>&nbsp;|&nbsp;</span>
									<a th:href="@{/admin/category/toEdit(id=${category.id})}" class="btn btn-xs btn-success">编辑</a>
									<span>&nbsp;|&nbsp;</span>
									<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" th:onclick="'javascript: confrimRemove(\''+${category.id}+'\')'">删除</a>
								</td>
							</tr>
							<tr th:if="${#lists.isEmpty(categorys.list)}">
								<td colspan="7" align="center">无数据</td>
							</tr>
						</tbody>
					</table>
			    </div>
			    <div class="panel-footer bg-white text-right">
                     <ul class="pagination">
                         <li><a th:href="@{/admin/category/list(pageNum=${categorys.navigateFirstPage},pageSize=${categorys.pageSize})}" title="首页" th:class="${categorys.isFirstPage} ? 'paginationNotAllowed' : ''">«</a></li>
                         <li><a th:href="@{/admin/category/list(pageNum=${categorys.prePage},pageSize=${categorys.pageSize})}" title="上一页" th:if="${categorys.hasPreviousPage}">‹</a></li>
                         <li th:each="pageinfo : ${categorys.navigatepageNums}"><a th:href="@{/admin/category/list(pageNum=${pageinfo},pageSize=${categorys.pageSize})}" th:class="${pageinfo == categorys.pageNum} ? 'paginationActive' : ''" th:text="${pageinfo}"></a></li>
                         <li><a th:href="@{/admin/category/list(pageNum=${categorys.nextPage},pageSize=${categorys.pageSize})}" title="下一页" th:if="${categorys.hasNextPage}">›</a></li>
                         <li><a th:href="@{/admin/category/list(pageNum=${categorys.navigateLastPage},pageSize=${categorys.pageSize})}" title="未页" th:class="${categorys.isLastPage} ? 'paginationNotAllowed' : ''">»</a></li>
                     </ul>
                 </div>
			</section>
		</div>
	</div>
	<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
						<h4 class="modal-title">您确定要删除该记录吗？</h4>
						<input type="hidden" id="cacheID" />
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
                    	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- jQuery 2.0.2 -->
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
	<!-- jQuery UI 1.10.3 -->
	<script src="/resource/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
	<script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- iCheck -->
    <script src="/resource/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
	<!-- Director App -->
	<script src="/resource/js/Director/app.js" type="text/javascript"></script>
	<script src="/resource/js/jquery.serializejson.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			renderCheckBox();
		}
		
		function renderCheckBox(){
			$('input').on('ifChecked', function(event) {
			    $(this).parents('li').addClass("task-done");
			    console.log('ok');
			});
			$('input').on('ifUnchecked', function(event) {
			    $(this).parents('li').removeClass("task-done");
			    console.log('not');
			});
			
			$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
			    checkboxClass: 'icheckbox_flat-grey',
			    radioClass: 'iradio_flat-grey'
			});
		}
		
		function toAddCategory(){
			window.location.href = "/admin/category/toAdd?id=-1";	
		}
		
		function loadSons(cid,obj){
			var parentDOM = $("tr[parent='" + cid + "']");
	        $level = parseInt($(obj).attr("level"));
			if(parentDOM == null || parentDOM.length <= 0){
				$.ajax({
					url: "/admin/category/loadSon?id="+cid,
					type: "GET",
				    dataType:"json",
				    contentType:"application/json;charset=utf-8",
					success: function(data) {
						for(var i=0;i<data.list.length;i++){
							var trstr = buildHTML(data.list[i]);
						    $("#" + cid).after(trstr);
						}
						renderCheckBox();
					}
				});
			    $(obj).attr("src","/resource/img/contract.gif");
			}else{
				$(parentDOM).remove();
				$(obj).attr("src","/resource/img/explode.gif");
			}
			renderCheckBox();
		}
		
		function buildHTML(element){
			var trstr = '<tr id="' + element.id + '" parent="' + element.parentId + '">';
		    trstr += '<td><input type="checkbox" class="flat-grey list-child"/></td>';
		    trstr += '<td><img src="/resource/img/explode.gif" style="cursor:pointer;" onclick="loadSons(\''+ element.id +'\',this);" width="11" height="11" /></td>';
		    trstr += '<td>' + element.code + '</td>';
		    trstr += '<td style="padding-left:' + ((++element.level)*10) + 'px;"><a href="/admin/archives/list?entity%5Bcid%5D='+element.code+'">' + element.cnname + '</a></td>';
		    trstr += '<td>' + element.enname + '</td>';
		    trstr += '<td>' + (element.isShow == 1 ? '<span class="label label-success">是</span>' : '<span class="label label-danger">否</span>') + '</td>';
		    trstr += '<td>';
		    trstr += '<input name="orderBy" type="text" cid="'+element.id+'" class="form-control input-sm" value="'+element.sort+'" style="width:50px;height:20px;">';
		    trstr += '</td>';
		    trstr += '<td>';
		    trstr += '<a href="/admin/category/toAdd?id='+element.id+'" class="btn btn-xs btn-success">添加下级栏目</a>';
		    trstr += '<span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>';
		    trstr += '<a href="/admin/category/toEdit?id=' + element.id + '" class="btn btn-xs btn-success">编辑</a>';
		    trstr += '<span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>';
		    trstr += '<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" onclick="confrimRemove(\''+element.id+'\')">删除</a>';
		    trstr += '</td>';
		    trstr += '</tr>';
		    return trstr;
		}
		
		function updateSort(){
			var arr = new Array();
			$("input[name='orderBy']").each(function(){
				var id = $(this).attr("cid");
				var sort = $(this).val();
				if(sort){
					arr.push({id:id,sort:sort});
				}
			});
			$.ajax({
				url: "/admin/category/updateSort",
				type: "POST",
				data: JSON.stringify(arr),
			    dataType: "json",
			    contentType:"application/json;charset=utf-8",
				success: function(data) {
					window.location.href = "/admin/category/list";
				}
			});
		}
		
		function confrimRemove(id){
			$("#remove-dialog").modal();
			$("#cacheID").val(id);
		}
		
		function remove(){
			var currentID = $("#cacheID").val();
			window.location.href="/admin/category/delete?id="+currentID;
			$("#remove-dialog").modal('hide');
		}
	</script>
</body>
</html>
